<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>基本使用</title>
  </head>

  <body>
    <button id="btn">点击抽奖</button>
    <script>
      function rand(m, n) {
        return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
      }
      // 点击按钮, 2s 后显示是否中奖.  30% 概率中奖  『1-100』
      // 中奖弹出   恭喜恭喜   显示中奖号码
      // 未中奖弹出  再接再厉   显示数字

      //获取按钮
      let btn = document.getElementById('btn');

      //绑定单击事件
    //   btn.onclick = function(){
    //     //定时器
    //     setTimeout(() => {
    //         //生成从 1 - 100 的随机整数
    //         let n = rand(1, 100);
    //         //判断
    //         if(n <= 30){
    //             alert('恭喜恭喜, 您的中奖号码为' + n);
    //         }else{
    //             alert('再接再厉, 您的号码为' + n);
    //         }
    //     }, 2000)
    //   }

    // Promise 形式 
    btn.onclick = function(){
        //                  resolve 解决   reject 拒绝   resolve与reject都是内部函数
        let p = new Promise((resolve, reject) => {
            //异步任务
            setTimeout(() => {
                let n = rand(1, 100);
                if(n <= 80){
                    //成功
                    resolve(n);
                }else{
                    //失败
                    reject(n);
                }
            }, 2000)
        });
        //处理结果 then 然后
        //第一个函数为异步任务成功的回调,  value 是值
        //第二个函数为异步任务失败的回调,  reason 是理由, 原因
        p.then((value) => {
            alert('恭喜恭喜!! 您的中奖号码为' + value);
        }, (reason) => {
            alert('再接再厉~~ 您的号码为' + reason)
        });
    }

    </script>
  </body>
</html>
